/**
 * 响应式工具函数
 * 提供统一的响应式断点和工具函数
 */

// 响应式断点定义
export const BREAKPOINTS = {
  xs: 0,      // 超小屏（手机）
  sm: 576,    // 小屏（大手机）
  md: 768,    // 中屏（平板）
  lg: 992,    // 大屏（小桌面）
  xl: 1200,   // 超大屏（桌面）
  xxl: 1600   // 超超大屏（大桌面）
}

// 设备类型
export const DEVICE_TYPES = {
  MOBILE: 'mobile',
  TABLET: 'tablet',
  DESKTOP: 'desktop'
}

/**
 * 获取当前设备类型
 * @returns {string} 设备类型
 */
export function getDeviceType() {
  const width = window.innerWidth
  if (width < BREAKPOINTS.md) {
    return DEVICE_TYPES.MOBILE
  } else if (width < BREAKPOINTS.lg) {
    return DEVICE_TYPES.TABLET
  } else {
    return DEVICE_TYPES.DESKTOP
  }
}

/**
 * 判断是否为移动设备
 * @returns {boolean}
 */
export function isMobile() {
  return window.innerWidth < BREAKPOINTS.md
}

/**
 * 判断是否为平板设备
 * @returns {boolean}
 */
export function isTablet() {
  const width = window.innerWidth
  return width >= BREAKPOINTS.md && width < BREAKPOINTS.lg
}

/**
 * 判断是否为桌面设备
 * @returns {boolean}
 */
export function isDesktop() {
  return window.innerWidth >= BREAKPOINTS.lg
}

/**
 * 响应式字体大小计算
 * @param {number} minSize - 最小字体大小（px）
 * @param {number} maxSize - 最大字体大小（px）
 * @param {number} minWidth - 最小宽度（px）
 * @param {number} maxWidth - 最大宽度（px）
 * @returns {string} CSS clamp值
 */
export function responsiveFontSize(minSize, maxSize, minWidth = 320, maxWidth = 1920) {
  return `clamp(${minSize}px, ${((maxSize - minSize) / (maxWidth - minWidth)) * 100}vw + ${minSize - ((maxSize - minSize) / (maxWidth - minWidth)) * minWidth}px, ${maxSize}px)`
}

/**
 * 响应式间距计算
 * @param {number} minSpacing - 最小间距（px）
 * @param {number} maxSpacing - 最大间距（px）
 * @returns {string} CSS clamp值
 */
export function responsiveSpacing(minSpacing, maxSpacing) {
  return `clamp(${minSpacing}px, ${((maxSpacing - minSpacing) / 1200) * 100}vw, ${maxSpacing}px)`
}

/**
 * 响应式列数计算（用于网格布局）
 * @param {Object} columns - 不同断点的列数配置
 * @returns {string} CSS grid-template-columns值
 */
export function responsiveColumns(columns = {}) {
  const { xs = 1, sm = 2, md = 3, lg = 4, xl = 5 } = columns
  
  return {
    xs: `repeat(${xs}, 1fr)`,
    sm: `repeat(${sm}, 1fr)`,
    md: `repeat(${md}, 1fr)`,
    lg: `repeat(${lg}, 1fr)`,
    xl: `repeat(${xl}, 1fr)`
  }
}

/**
 * 触摸设备检测
 * @returns {boolean}
 */
export function isTouchDevice() {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0
}

/**
 * 响应式图片尺寸
 * @param {Object} sizes - 不同断点的尺寸配置
 * @returns {string} sizes属性值
 */
export function responsiveImageSizes(sizes = {}) {
  const { xs = '100vw', sm = '50vw', md = '33vw', lg = '25vw' } = sizes
  return `(max-width: ${BREAKPOINTS.sm}px) ${xs}, (max-width: ${BREAKPOINTS.md}px) ${sm}, (max-width: ${BREAKPOINTS.lg}px) ${md}, ${lg}`
}

/**
 * 创建响应式监听器
 * @param {Function} callback - 回调函数
 * @returns {Function} 清理函数
 */
export function createResponsiveListener(callback) {
  let timeoutId = null
  
  const handleResize = () => {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => {
      callback({
        width: window.innerWidth,
        height: window.innerHeight,
        deviceType: getDeviceType(),
        isMobile: isMobile(),
        isTablet: isTablet(),
        isDesktop: isDesktop()
      })
    }, 150) // 防抖
  }
  
  window.addEventListener('resize', handleResize)
  handleResize() // 立即执行一次
  
  return () => {
    window.removeEventListener('resize', handleResize)
    if (timeoutId) {
      clearTimeout(timeoutId)
    }
  }
}

/**
 * Vue组合式API响应式工具
 * 注意：需要在Vue组件setup函数中调用
 */
export function useResponsive() {
  // 在Vue组件中，这些会从vue导入
  // 这里提供一个简化版本，返回computed值
  const width = { value: window.innerWidth }
  const height = { value: window.innerHeight }
  const deviceType = { value: getDeviceType() }
  const isMobileDevice = { value: isMobile() }
  const isTabletDevice = { value: isTablet() }
  const isDesktopDevice = { value: isDesktop() }
  const isTouch = { value: isTouchDevice() }
  
  // 创建响应式监听器
  const cleanup = createResponsiveListener(({ width: w, height: h, deviceType: dt, isMobile: im, isTablet: it, isDesktop: id }) => {
    width.value = w
    height.value = h
    deviceType.value = dt
    isMobileDevice.value = im
    isTabletDevice.value = it
    isDesktopDevice.value = id
  })
  
  return {
    width,
    height,
    deviceType,
    isMobile: isMobileDevice,
    isTablet: isTabletDevice,
    isDesktop: isDesktopDevice,
    isTouch,
    cleanup
  }
}

export default {
  BREAKPOINTS,
  DEVICE_TYPES,
  getDeviceType,
  isMobile,
  isTablet,
  isDesktop,
  responsiveFontSize,
  responsiveSpacing,
  responsiveColumns,
  isTouchDevice,
  responsiveImageSizes,
  createResponsiveListener,
  useResponsive
}

